<script setup lang='ts'>
    import {onMounted, ref} from 'vue'
    import * as echarts from 'echarts'
    // 水球图拓展插件
    import 'echarts-liquidfill'
    const people = ref<string>('215908人')
    // console.log(echarts);

    const charts = ref<any>()
    onMounted(() => {
        // 获取echarts实例
        const mycharts = echarts.init(charts.value)
        // 设置实例的配置项
        // console.log(mycharts);
        mycharts.setOption({
            title: {
                // text: '水球图'
            },
            // x轴组件
            xAxis: {},
            yAxis: {},
            // 系列：决定你展示什么样的图形图表
            series: {
                type: 'liquidFill',
                data: [0.6, 0.4, 0.2],
                radius: '100%'
            },
            // 布局组件
            grid: {
                left: 0,
                right: 0,
                bottom: 0,
                top: 0
            }
        })
    })
</script>


<template>
    <div class="box">
        <div class="top">
            <!-- 已注册为公共组件 -->
            <Title title="实时游客统计"></Title>
            <p class="right">可预约总量<span> 99999 </span>人</p>
        </div>
        <div class="number">
            <span v-for="item,index in people" :key="index">{{ item }}</span>
        </div>
        <div ref="charts" class="charts"></div>
    </div>
</template>


<style scoped lang='scss'>
    .box {
        background: url('@/views/screen/images/dataScreen-main-lb.png') no-repeat;
        background-size: 100% 100%;
        margin-top: 10px;
        .top{
            margin-left: 20px;
           
            .right{
                float: right;
                font-size: 20px;
                span{
                    color: yellowgreen;
                }
            }
        }
        .number{
            display: flex;
            margin-top: 30px;
            padding: 10px;
            span{
                flex: 1;
                background: url('@/views/screen/images/total.png') no-repeat;
                background-size: 100% 100%;
                height: 40px;
                line-height: 40px;
                color: #29fcff;
                text-align: center;
            }
        }
        .charts{
            height: 270px;
        }
    }
</style>